{% extends 'base.html' %}
{% block title %}
    可视化大数据分析
{% endblock %}

{% block css %}

{% endblock %}

{% block nav_list %}
    <li><a href="/list/">列表筛选视图</a></li>
    <li><a href="/overlook/">可视化数据概览</a></li>
    <li class="active"><a href="/chart/">可视化大数据分析</a></li>
    <li><a href="/predict/">漏洞解决时间预测</a></li>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <button class="list-group-item btn-info" style="margin-bottom: 30px">
                    <h4 class="text-center text-info">漏洞种类数量</h4>
                    <p class="text-center">{{ num1 }}</p>
                </button>
                <button class="list-group-item btn-info" style="margin-bottom: 30px">
                    <h4 class="text-center text-info">漏洞等级数量</h4>
                    <p class="text-center">{{ num2 }}</p>
                </button>
                <button class="list-group-item btn-info" style="margin-bottom: 30px">
                    <h4 class="text-center text-info">漏洞数据总量</h4>
                    <p class="text-center">{{ num3 }}</p>
                </button>
            </div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-6" id="progress_pie" style="height: 400px"></div>
                    <div class="col-md-6" id="progress_pie2" style="height: 400px"></div>
                </div>
            </div>
        </div>

        {#    <div class="row" style="margin-bottom: 20px">#}
        {#        <div class="col-md-12">#}
        {#            <form class="form-inline">#}
        {#                <div class="form-group">#}
        {#                    <span class="form-control-static" style="font-weight: bolder; font-size: 18px;">漏洞趋势图</span>#}
        {#                </div>#}
        {#                <div class="form-group pull-right">#}
        {#                    <label for="start" class="sr-only"></label>#}
        {#                    <select class="form-control" name="start" id="start" onchange="this.form.submit()">{{ start_select_html }}</select>#}
        {#                    <span class="form-control-static">-</span>#}
        {#                    <label for="end" class="sr-only"></label>#}
        {#                    <select class="form-control" name="end" id="end" onchange="this.form.submit()">{{ end_select_html }}</select>#}
        {#                </div>#}
        {#            </form>#}
        {#        </div>#}
        {#        <div class="col-md-12" id="line" style="height: 300px"></div>#}
        {#    </div>#}
        {#    <div class="row">#}
        {#        <div class="col-md-12" id="bar" style="height: 400px"></div>#}
        {#    </div>#}
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        let progress_pie = echarts.init(document.getElementById('progress_pie'));
        let progress_pie_data = {{ progress_pie.series|safe }};
        let progress_pie_option = {
            backgroundColor: '#fff',
            title: {
                text: '漏洞等级分布情况',
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                bottom: '0%',
                data: {{ progress_pie.legend|safe }},
            },
            series: [{
                type: 'pie',
                selectedMode: 'single',
                center: ['50%', '50%'],
                radius: ['20%', '50%'],
                color: ['#AF89D6', '#59ADF3', '#FF999A', '#FFCC67', '#86D560'],

                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{d}%',

                        textStyle: {
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 14
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: progress_pie_data
            }, {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['50%', '80%'],
                itemStyle: {
                    normal: {
                        color: '#F2F2F2'
                    },
                    emphasis: {
                        color: '#ADADAD'
                    }
                },
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{c}个',
                        textStyle: {
                            color: '#777777',
                            fontWeight: 'bold',
                            fontSize: 14
                        }
                    }
                },
                data: progress_pie_data
            }]
        };
        progress_pie.setOption(progress_pie_option);
    </script>
        <script type="text/javascript">
        let progress_pie2 = echarts.init(document.getElementById('progress_pie2'));
        let progress_pie_data2 = {{ progress_pie2.series|safe }};
        let progress_pie_option2 = {
            backgroundColor: '#fff',
            title: {
                text: '漏洞种类TOP5',
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                bottom: '0%',
                data: {{ progress_pie2.legend|safe }},
            },
            series: [{
                type: 'pie',
                selectedMode: 'single',
                center: ['50%', '50%'],
                radius: ['20%', '50%'],
                color: ['#AF89D6', '#59ADF3', '#FF999A', '#FFCC67', '#86D560'],

                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{d}%',

                        textStyle: {
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 14
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: progress_pie_data2
            }, {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['50%', '80%'],
                itemStyle: {
                    normal: {
                        color: '#F2F2F2'
                    },
                    emphasis: {
                        color: '#ADADAD'
                    }
                },
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{c}个',
                        textStyle: {
                            color: '#777777',
                            fontWeight: 'bold',
                            fontSize: 14
                        }
                    }
                },
                data: progress_pie_data2
            }]
        };
        progress_pie2.setOption(progress_pie_option2);
    </script>
    {#<script>#}
    {#    let line = echarts.init(document.querySelector("#line"));#}
    {#    let option_line = {#}
    {#      color: ['#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],#}
    {#      tooltip: {#}
    {#        trigger: 'axis',#}
    {#        axisPointer: {#}
    {#          type: 'cross',#}
    {#          label: {#}
    {#            backgroundColor: '#6a7985'#}
    {#          }#}
    {#        }#}
    {#      },#}
    {#      legend: {#}
    {#        top: 'bottom',#}
    {#        data: ['漏洞数量']#}
    {#      },#}
    {#      toolbox: {#}
    {#        left: 'right',#}
    {#        top: 'bottom',#}
    {#        feature: {#}
    {#          dataZoom: {#}
    {#            yAxisIndex: 'none'#}
    {#          },#}
    {#          restore: {},#}
    {#          saveAsImage: {}#}
    {#        }#}
    {#      },#}
    {#      grid: {#}
    {#        top: '4%',#}
    {#        left: '0%',#}
    {#        right: '3%',#}
    {#        bottom: '10%',#}
    {#        containLabel: true#}
    {#      },#}
    {#      xAxis: [#}
    {#        {#}
    {#          type: 'category',#}
    {#          boundaryGap: false,#}
    {#          data: {{ trend_line_x }}#}
    {#        }#}
    {#      ],#}
    {#      yAxis: [#}
    {#        {#}
    {#          type: 'value'#}
    {#        }#}
    {#      ],#}
    {#      series: [#}
    {#        {#}
    {#          name: '漏洞数量',#}
    {#          type: 'line',#}
    {#          stack: 'Total',#}
    {#          smooth: true,#}
    {#          lineStyle: {#}
    {#            width: 0#}
    {#          },#}
    {#          showSymbol: false,#}
    {#          areaStyle: {#}
    {#            opacity: 0.6,#}
    {#            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [#}
    {#              {#}
    {#                offset: 0,#}
    {#                color: 'rgb(0, 221, 255)'#}
    {#              },#}
    {#              {#}
    {#                offset: 1,#}
    {#                color: 'rgb(77, 119, 255)'#}
    {#              }#}
    {#            ])#}
    {#          },#}
    {#          emphasis: {#}
    {#            focus: 'series'#}
    {#          },#}
    {#          data: {{ trend_line_y }}#}
    {#        },#}
    {#      ]#}
    {#    };#}
    {#    line.setOption(option_line);#}
    {#    window.addEventListener("resize", function () {#}
    {#        line.resize();#}
    {#    });#}
    {#</script>#}
    {#<script>#}
    {#    let bar = echarts.init(document.querySelector("#bar"));#}
    {#    let option_bar = {#}
    {#      title: {#}
    {#        left: '',#}
    {#        text: '不同漏洞类型的等级分布',#}
    {#      },#}
    {#      color: ["#3fb1e3", "#a0a7e6", "#6be6c1", "#96dee8", "#626c91", "#c4ebad"],#}
    {#      tooltip: {#}
    {#        trigger: 'axis'#}
    {#      },#}
    {#      legend: {#}
    {#        top: '1%',#}
    {#        left: 'center',#}
    {#        data: ['低危', '中危', '高危', '超危', '总数']#}
    {#      },#}
    {#      grid: {#}
    {#        top: '10%',#}
    {#        left: '0%',#}
    {#        right: '2%',#}
    {#        bottom: '10%',#}
    {#        containLabel: true#}
    {#      },#}
    {#      toolbox: {#}
    {#        top: '1%',#}
    {#        right: '2%',#}
    {#        feature: {#}
    {#          saveAsImage: {}#}
    {#        }#}
    {#      },#}
    {#      xAxis: {#}
    {#        type: 'category',#}
    {#        boundaryGap: false,#}
    {#        data: {{ bar_x }},#}
    {#      },#}
    {#      yAxis: {#}
    {#        type: 'value'#}
    {#      },#}
    {#      series: [#}
    {#        {#}
    {#          name: '低危',#}
    {#          type: 'bar',#}
    {#          stack: 'Total',#}
    {#          data: {{ bar_low_y }},#}
    {#        },#}
    {#        {#}
    {#          name: '中危',#}
    {#          type: 'bar',#}
    {#          stack: 'Total',#}
    {#          data: {{ bar_mid_y }}#}
    {#        },#}
    {#        {#}
    {#          name: '高危',#}
    {#          type: 'bar',#}
    {#          stack: 'Total',#}
    {#          data: {{ bar_high_y }}#}
    {#        },#}
    {#        {#}
    {#          name: '超危',#}
    {#          type: 'bar',#}
    {#          stack: 'Total',#}
    {#          data: {{ bar_over_y }}#}
    {#        },#}
    {#        {#}
    {#          name: '总数',#}
    {#          type: 'line',#}
    {#          smooth: true,#}
    {#          data: {{ bar_all_y }}#}
    {#        }#}
    {#      ]#}
    {#    };#}
    {#    bar.setOption(option_bar);#}
    {#    window.addEventListener("resize", function() {#}
    {#        bar.resize();#}
    {#    });#}
    {#</script>#}
{% endblock %}